diff options
| author | real-zephex <[email protected]> | 2024-05-24 22:51:36 +0530 |
|---|---|---|
| committer | real-zephex <[email protected]> | 2024-05-24 22:51:36 +0530 |
| commit | 180c9577f8337991ca71470816333fe8430cd3ca (patch) | |
| tree | 82caa5a920443bcf0db3746c7ecacd968d4fc148 /src/app/kdrama/[id]/page.jsx | |
| parent | style: minor improvements to the anime cards (diff) | |
| download | dramalama-180c9577f8337991ca71470816333fe8430cd3ca.tar.xz dramalama-180c9577f8337991ca71470816333fe8430cd3ca.zip | |
✨ feat(ui): 🎨 migrate from vanilla css to tailwind css, adopted next ui and restructured
Diffstat (limited to 'src/app/kdrama/[id]/page.jsx')
| -rw-r--r-- | src/app/kdrama/[id]/page.jsx | 92 |
1 files changed, 36 insertions, 56 deletions
diff --git a/src/app/kdrama/[id]/page.jsx b/src/app/kdrama/[id]/page.jsx index 9cb3cd8..d94810e 100644 --- a/src/app/kdrama/[id]/page.jsx +++ b/src/app/kdrama/[id]/page.jsx @@ -1,66 +1,46 @@ -import styles from "../styles/info.module.css";
-import Image from "next/image";
-import EpisodesButtons from "./buttons";
-import { PreFetchVideoLinks } from "../components/cacher";
+import { Chip, Image } from "@nextui-org/react";
+import DescriptionTabs from "../components/infoTabs";
+import { dramaInfo } from "../components/requests";
+import EpisodesContainer from "../components/episodesContainer";
export default async function DramaInfo({ params }) {
const id = decodeURIComponent(params.id);
- const info = await getDramaInfo(id);
-
- PreFetchVideoLinks(info.episodes, id);
+ const data = await dramaInfo(id);
return (
- <div className={styles.Main}>
- {info && (
- <div className={styles.DramaInfoContainer}>
- <div className={styles.TitleContainer}>
- <p>{info.title}</p>
- <Image
- src={`https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=${info.image}`}
- width={175}
- height={256}
- alt="Drama Poster"
- priority
- />
- </div>
-
- {/* Drama description */}
- <div className={styles.DramaDescription}>
- <h2>Description</h2>
- <p>{info.description}</p>
- </div>
-
- {/* Genres */}
- <div className={styles.DramaGenre}>
- <span className={styles.genreMain}>Genres: </span>
- {info.genres &&
- info.genres.map((item, index) => (
- <p key={index}>{item}</p>
- ))}
- </div>
-
- {/* Other names */}
- <div className={styles.DramaGenre}>
- <span className={styles.genreMain}>AKA: </span>
- {info.otherNames &&
- info.otherNames.map((item, index) => (
- <p key={index}>{item}</p>
+ <section className="pt-12 lg:w-9/12 m-auto">
+ <div className="flex items-center justify-center lg:justify-start md:justify-start">
+ <Image
+ isBlurred
+ width={190}
+ src={data.image.toString()}
+ alt="Anime Title Poster"
+ className="m-2"
+ />
+ <div className="mx-5">
+ <h4 className={`text-2xl`}>
+ <strong>{data.title}</strong>
+ </h4>
+ <div className="mt-1">
+ {data.genres &&
+ data.genres.map((item, index) => (
+ <Chip
+ key={index}
+ color="warning"
+ variant="faded"
+ className="mr-1 mb-1"
+ >
+ <p className="text-xs">{item}</p>
+ </Chip>
))}
</div>
-
- {/* Episodes Buttons */}
- <EpisodesButtons data={info.episodes} id={id} />
</div>
- )}
- </div>
- );
-}
-
-async function getDramaInfo(id) {
- const res = await fetch(
- `https://consumet-jade.vercel.app/movies/dramacool/info?id=${id}`,
- { next: { revalidate: 21600 } }
+ </div>
+ <DescriptionTabs data={data} />
+ <EpisodesContainer data={data} />
+ <br />
+ <br />
+ <br />
+ </section>
);
- const data = await res.json();
- return data;
}
|